<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/title.css"/>

<style type="text/css">
	#d0{
		height: 800px;
		width: 1000px;
		margin: auto;
		/*background: skyblue;*/
	}
	#top{
		margin: auto;
	}
	input{
		border: none;
		border-bottom: solid 1px;
		width: 1000px;
	}
	#text{
		height: 30px;
		font-size: 30px;
	}
	#content{
		height: 400px;
		width: 1000px;
		border: none;
		font-size: 22px;
	}
	#submit1{
		background:rgb(255,102,51);
		width: 60px;
		color:#fff;
	}
	/*回显*/
	.uploadImgBtn {
		width: 30px;
		height: 30px;
		cursor: pointer;
		position: relative;
		background: url("img/imgupload.png") no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
		float: left;
		left: 300px;
	}
	
	.uploadImgBtn .uploadImg {
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
	}
	
	//这是一个用做回显的盒子的样式
	.pic {
		width: 100px;
		height: 100px;
	}
	
	.pic img {
		width: 30%;
		height: 30%;
	}
</style>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.5/themes/icon.css">
	<script type="text/javascript" src="js/jquery-easyui-1.4.5/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript">
	function a(){
		if (document.getElementById("text").value.trim()=="请输入帖子标题") {
			document.getElementById("text").value="";
		}
	}
	function d(){
		if (document.getElementById("content").value.trim()=="从这里开始分享") {
			document.getElementById("content").value="";
		}
	}
	function b(){
			if (document.getElementById("text").value.trim()=="") {
				document.getElementById("text").value="请输入帖子标题";
			}
	}
	function c(){
			if (document.getElementById("content").value.trim()=="") {
				document.getElementById("content").value="从这里开始分享";
			}
	}

    function check(form) {
    	console.log("why");
         if(document.getElementById("text").value.trim()==''||document.getElementById("text").value.trim()=="请输入帖子标题") {
               alert("请输入帖子标题!");
               form.text.focus();
               return false;
          }
          if(document.getElementById("content").value.trim()==''||document.getElementById("content").value.trim()=="从这里开始分享"){
               alert("请输入帖子内容!");
               form.content.focus();
               return false;
            }
          document.myform.submit();
    }



	</script>
</head>
<body>
	<div id="top" class="top">
		    <div id="top1">
		    	<div id="logo"><a href="login.html"  target="_self"><img src="img/logoword.jpg"/></div>
		    	
		    </div>
		    <div id="top2"  class="container">
	            <section class="c1">
		            <nav class="cl">
			 		<a href="main.html" target="_self" data-hover="主页"><span>主页</span></a>
					<a href="addR.html" target="_self" data-hover="美食收录"><span>美食收录</span></a>
					<a href="block.html" target="_self" data-hover="交流圈子"><span>交流圈子</span></a>
					<a href="usermain.html" target="_self" data-hover="个人主页"><span>个人主页</span></a>
		            </nav>
	            </section>	
	       
            </div>
		     <div id="top3"></div>
		</div>
		<div id="bag">
			<div id="d0">
				<form action="sendpost" method="post" name="myform" id="myform" enctype="multipart/form-data">
				<input type="text" name="text" id="text" value="请输入帖子标题" onkeydown="a()" onblur="b()"/>
				<div></div> 
				<textarea name="content" id = "content" value="" onkeydown="d()" onblur="c()">从这里开始分享</textarea>
				<div id="reimg">
					
				</div>
				<div id="">
					<input type="button" name="submit1" id="submit1" value="发布"  onclick="check(this.form)"/ >
					<select name="sel" value="">
						<option value="1">美食推荐</option>
						<option value="2">厨艺交流</option>
						<option value="3">饮食健康</option>
						<option value="4">日常分享</option>
					</select>#请选择发布板块
				 <div class="uploadImgBtn" id="uploadImgBtn">
        			<input class="uploadImg" type="file" name="file" multiple id="file">
   				 </div>
				</div>
			</form>
			</div>
		</div>
</body>
<script>
    $(document).ready(function(){
        //为外面的盒子绑定一个点击事件
        $("#uploadImgBtn").click(function(){
            /*
            1、先获取input标签
            2、给input标签绑定change事件
            3、把图片回显
             */
//            1、先回去input标签
            var $input = $("#file");
            console.log($input)
//            2、给input标签绑定change事件
            $input.on("change" , function(){
                console.log(this)
                //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
                //获取选择图片的个数
                var files = this.files;
                var length = files.length;
                console.log("选择了"+length+"张图片");
                //3、回显
                $.each(files,function(key,value){
                    //每次都只会遍历一个图片数据
                    var div = document.createElement("div"),
                        img = document.createElement("img");
                    div.className = "pic";

                    var fr = new FileReader();
                    fr.onload = function(){
                        img.src=this.result;
                        div.appendChild(img);
                        document.getElementById("reimg").appendChild(div);
                    }
                    fr.readAsDataURL(value);
                });

            });

            //4、我们把当前input标签的id属性remove
            $input.removeAttr("id");
            //我们做个标记，再class中再添加一个类名就叫test
            var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
            $(this).append($(newInput));

        });

    });

</script>
